<template>
	<u-skeleton :loading="loading" rows="6" rowsHeight="50" :title="false">
		<view class="battery-testing-report">
			<image class="background" mode="widthFix" :src="fixUrl('20')" />
			<image class="logo" mode="widthFix" :src="fixUrl('logo')" />
			<text class="date">检测时间：{{ form.createTime }}</text>
			<view style="height: 312rpx" />
			<view v-for="item in UiConfig" :key="item.id" class="card-box">
				<view class="title">
					<image class="title-bg" mode="widthFix" :src="fixUrl('24')" />
					<view class="title-left">
						<u-icon color="#ffffff" name="play-right-fill" />
						<text>{{ item.title }}{{ 1 == item.prop ? `：${form.checkOrderNo}` : '' }}</text>
					</view>

					<image
						v-if="item.hasAnchor"
						class="title-right--img"
						mode="widthFix"
						:src="fixUrl('26')"
						style="width: 126rpx; height: 126rpx"
					/>

					<image
						v-if="item.hasWaterMark"
						class="title-right--img"
						mode="widthFix"
						:src="fixUrl('watermark')"
						style="width: 186rpx; height: 186rpx; right: 10rpx"
					/>
				</view>

				<view class="content">
					<!-- 报告 -->
					<template v-if="1 == item.prop">
						<view class="report-list">
							<view v-for="(il, idx) in item.list" :key="idx" class="list-item">
								<image mode="widthFix" :src="il.icon" style="width: 32rpx; height: 32rpx" />
								<text>{{ il.label }}</text>
							</view>
						</view>
						<text class="font-28 mt-20 flex">{{ item.desc }}</text>
					</template>

					<!-- 车辆基础信息 -->
					<template v-if="2 == item.prop">
						<view class="flex column-gap-12" style="margin-top: 32rpx; margin-bottom: 32rpx">
							<image mode="widthFix" :src="fixUrl('car_i')" style="width: 36rpx; height: 36rpx" />
							<view class="font-32">{{ form.plateNo }}</view>
						</view>
						<view class="flex">
							<image mode="widthFix" :src="fixUrl('car')" style="width: 240rpx; height: 110rpx; flex-shrink: 0" />

							<view class="flex-column" style="flex: 1">
								<view class="vin">VIN：{{ form.vin }}</view>
								<!-- <view class="vin">购车时间： 2019 年 09 月</view> -->
							</view>
						</view>

						<view class="flex column-gap-12" style="margin-top: 37rpx">
							<view v-for="(il, idx) in item.list" :key="idx" class="flex-column info-column">
								<view class="flex">
									<image mode="widthFix" :src="il.icon" style="width: 40rpx; height: 40rpx" />
									<text class="font-24" style="margin-left: 8rpx">{{ form[il.prop] }}</text>
								</view>
								<view class="font-24" style="margin-top: 8rpx">{{ il.label }}</view>
							</view>
						</view>

						<u-line color="#979797" dashed margin="36rpx 0" />

						<view class="flex">
							<view class="score">
								<image class="score-bg" mode="widthFix" :src="fixUrl('pf')" style="width: 324rpx; height: 324rpx" />
								<view class="score-val">
									{{ form.batScore }}
									<text style="font-size: 30rpx">分</text>
								</view>
							</view>
							<view class="font-24" style="line-height: 34rpx; margin-left: 12rpx">
								您爱车电池健康综合评级为
								<text class="highlight">{{ form.batLevel }}</text>
								超过了
								<text class="highlight">{{ form.batScorePercent }}%</text>
								, 的同类车型, 继续保持良好的充电、驾驶习惯,可以延缓电池衰减，延长电池寿命。
							</view>
						</view>
					</template>

					<!-- 满电续航里程评估 -->
					<template v-if="3 == item.prop">
						<view class="flex-column" style="row-gap: 20rpx">
							<view v-for="(il, idx) in item.list" :key="idx" class="temperature">
								<image class="temperature-bg" :src="il.bgu" style="width: 100%; height: 100%" />
								<view class="temperature-val">{{ getSeasonInfo(il).tempWarn || '-' }}</view>
								<view class="temperature-extra">
									<view style="font-size: 36rpx">{{ il.label }}</view>
									<view class="font-24" style="margin-top: 18rpx">
										新车NEDC续航里程：{{ getSeasonInfo(il).mileage || '-' }}
									</view>
									<view class="font-24">当前满电续航里程：{{ getSeasonInfo(il).mileageSec || '-' }}</view>
								</view>
							</view>

							<view class="font-24" style="color: #60666c">
								<image mode="widthFix" :src="fixUrl('xdp')" style="width: 21rpx; height: 26rpx" />
								<text style="margin-left: 6rpx">{{ item.tips }}</text>
							</view>
						</view>
					</template>

					<!-- 电池健康评估 -->
					<template v-if="4 == item.prop">
						<view class="flex table">
							<view class="table-line-right" style="width: 50%; text-align: center">
								<view class="table-head">检测项目</view>
								<view v-for="(il, idx) in item.list" :key="idx" class="table-td">{{ il.label }}</view>
							</view>
							<view style="width: 50%; text-align: center">
								<view class="table-head">检测结果</view>
								<view v-for="(il, idx) in item.list" :key="idx" class="table-td" :style="{ color: il.color || '' }">
									{{ form[il.prop] }}{{ il.unit }}
								</view>
							</view>
						</view>

						<view class="mt-20 font-24">
							{{ item.tips }}
						</view>
					</template>

					<!-- 电池安全评估 -->
					<template v-if="5 == item.prop">
						<view class="security-tips">本次充电过程为电池做了“42项检测，发现2项异常。”</view>
						<view class="flex table">
							<view class="table-line-right" style="width: 50%; text-align: center">
								<view class="table-head">分类</view>
								<view v-for="(il, idx) in form.warnInfoList" :key="idx" class="table-td">{{ il.warnType }}</view>
							</view>
							<view class="table-line-right" style="width: 50%; text-align: center">
								<view class="table-head">项目</view>
								<view
									v-for="(il, idx) in form.warnInfoList"
									:key="idx"
									class="table-td"
									:style="{ color: il.color || '' }"
								>
									{{ il.warnObject }}
								</view>
							</view>
							<view style="width: 50%; text-align: center">
								<view class="table-head">检测结果</view>
								<view
									v-for="(il, idx) in form.warnInfoList"
									:key="idx"
									class="table-td"
									:style="{ color: il.color || '' }"
								>
									{{ il.warnResult }}
								</view>
							</view>
						</view>

						<view v-for="(il, idx) in form.warnDeclList" :key="idx" class="flex desc">
							<image
								mode="widthFix"
								:src="fixUrl('point')"
								style="width: 22rpx; height: 22rpx; flex-shrink: 0; margin-top: 10rpx"
							/>
							<view class="flex-column" style="margin-left: 8rpx">
								<view class="desc-title">{{ il.warnTypeStr }}</view>
								<view class="desc-desc">{{ il.warnDec }} {{ il.warnSuggest }}</view>
							</view>
						</view>
					</template>

					<!-- 电池健康评估 -->
					<template v-if="6 == item.prop">
						<view v-for="(il, idx) in item.list" :key="idx" class="healthy-list">
							<image mode="widthFix" :src="il.titleUrl" style="width: 294rpx; height: 56rpx" />
							<view class="font-28">{{ il.desc }}</view>
						</view>
					</template>

					<!-- 电池安全评估 -->
					<template v-if="7 == item.prop">
						<view class="qrcode">
							<view v-for="(il, idx) in item.list" :key="idx" class="flex-column">
								<image mode="widthFix" :src="il.url" style="width: 180rpx; height: 180rpx" />
								<text style="margin-top: 8rpx">{{ il.label }}</text>
							</view>
						</view>

						<view v-for="(desc, idx) in item.descList" :key="idx" class="flex desc">
							<image
								mode="widthFix"
								:src="fixUrl('point')"
								style="width: 22rpx; height: 22rpx; flex-shrink: 0; margin-top: 10rpx"
							/>
							<view class="flex-column font-24" style="margin-left: 8rpx; color: #60666c">
								{{ desc }}
							</view>
						</view>
					</template>
				</view>
			</view>

			<view class="extra">
				<view>免责申明</view>
				<view class="mt-20">
					本次电池估值报告所提供内容，仅基于截止到评估日期用户在小满用电平台充电过程中获取数据，以及部分关联第三方查询数据作出评估。关于此车辆的部分数据可能未被完整采集，检测报告仅作为参考资料，实际的关键指标项数据以车企数据为准。
				</view>
				<view style="margin-top: 40rpx; text-align: center; color: #999ea3">
					Copyright © 2021重庆驿满新能源科技有限公司
				</view>
			</view>
		</view>
	</u-skeleton>
</template>

<script>
import { createUIConfig, AssetBaseUrl } from './ui_data';
import { getBatteryReportInfo } from '@/api/batteryCheck';
export default {
	data() {
		return {
			AssetBaseUrl,
			UiConfig: createUIConfig(),
			form: {
				date: '',
				id: '',
				vehicleDto: {},
				warnInfoList: [],
				warnDeclList: [],
				mileageDtoLIst: []
			},
			loading: true
		};
	},
	onLoad(option) {
		this.loadData(option);
	},
	methods: {
		fixUrl(filename) {
			return `${AssetBaseUrl}${filename}.png`;
		},
		loadData({ checkOrderNo, billNo }) {
			this.loading = true;
			getBatteryReportInfo({ checkOrderNo, billNo }).then((res) => {
				const data = res.data;

				Object.keys(data).forEach((key) => {
					const isArray = ['warnInfoList', 'warnDeclList', 'mileageDtoLIst'].includes(key);
					data[key] = data[key] || (isArray ? [] : '-');
				});

				this.form = data;
				this.loading = false;
			});
		},
		getSeasonInfo(local) {
			return this.form.mileageDtoLIst.find((r) => r.seasonStr === local.label) || {};
		}
	}
};
</script>

<style lang="scss" scoped>
.battery-testing-report {
	width: 100%;
	min-height: 100vh;
	background: linear-gradient(270deg, #f0fcfa 0%, #cefbfa 100%);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 20rpx;
	padding-bottom: 80rpx;

	.logo {
		position: absolute;
		width: 142rpx;
		height: 43rpx;
		z-index: 2;
		top: 30rpx;
		left: 40rpx;
	}

	.font-28 {
		font-size: 28rpx;
	}

	.font-24 {
		font-size: 24rpx;
	}

	.font-32 {
		font-size: 32rpx;
	}

	.mt-20 {
		margin-top: 20rpx;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.flex-column {
		display: flex;
		flex-direction: column;
	}

	.column-gap-12 {
		column-gap: 12rpx;
	}

	.background {
		width: 100%;
		height: 576rpx;
		position: absolute;
		top: -166rpx;
		left: 0;
		z-index: 0;
	}
	.date {
		position: absolute;
		top: 227rpx;
		left: 41rpx;
		font-size: 22rpx;
		color: #222426;
	}
	.card-box {
		position: relative;
		width: 710rpx;
		min-height: 382rpx;
		background: #fdfdff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		z-index: 5;
		.title {
			position: relative;
			height: 80rpx;
			display: flex;
			align-items: center;
			padding-left: 24rpx;
			font-size: 28rpx;
			color: #ffffff;
			&-bg {
				width: 500rpx;
				height: 80rpx;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 0;
			}
			.title-left {
				position: relative;
				z-index: 5;
				display: flex;
				align-items: center;
				column-gap: 10rpx;
			}
			.title-right--img {
				position: absolute;
				right: -40rpx;
				top: 0;
			}
		}
		.content {
			margin-top: 28rpx;
			padding: 0 20rpx 30rpx;

			.report-list {
				height: 56rpx;
				background: #f2fcfc;
				box-shadow: inset 0rpx 1rpx 3rpx 0rpx #c0e5e2;
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				font-size: 24rpx;
				color: #222426;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 18rpx;
				.list-item {
					display: flex;
					align-items: center;
					column-gap: 10rpx;
					vertical-align: middle;
				}
			}

			.vin {
				height: 56rpx;
				background: #f0fcfc;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				margin-left: 34rpx;
				color: #16a59a;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				padding: 0 15rpx;
				&:not(:last-child) {
					margin-bottom: 12rpx;
				}
			}

			.info-column {
				width: 212rpx;
				height: 110rpx;
				background: rgba(197, 222, 255, 0.18);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				align-items: center;
				justify-content: center;
			}

			.score {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
				width: 324rpx;
				height: 324rpx;

				&-bg {
					position: absolute;
					left: 0;
					top: 0;
				}

				&-val {
					position: relative;
					z-index: 5;
					font-size: 50rpx;
				}
			}

			.highlight {
				display: inline-flex;
				font-size: 40rpx;
				color: #41c8a3;
				padding: 0 6rpx;
			}

			.temperature {
				position: relative;
				height: 240rpx;
				display: flex;

				&-val {
					position: relative;
					width: 220rpx;
					height: 100%;
					z-index: 5;
					display: flex;
					justify-content: center;
					margin-top: 152rpx;
					font-size: 28rpx;
					color: #f7f7f7;
					margin-left: 15rpx;
				}

				&-bg {
					position: absolute;
					top: 0;
					left: 0;
				}

				&-extra {
					margin-top: 20rpx;
					position: relative;
					z-index: 5;
					padding-top: 50rpx;
					color: #f7f7f7;
				}
			}

			.table {
				border: 1rpx solid #abd5e9;
				border-radius: 10rpx;
				overflow: hidden;
				&-head {
					color: #345eae;
					font-size: 28rpx;
					background-color: #d6f0fd;
					height: 90rpx;
					line-height: 90rpx;
				}
				&-td {
					height: 90rpx;
					line-height: 90rpx;
					color: #345eae;
					font-size: 26rpx;
					border-top: 1rpx solid #abd5e9;
				}
				&-line-right {
					border-right: 1rpx solid #abd5e9;
				}
			}

			.security-tips {
				height: 56rpx;
				line-height: 56rpx;
				font-size: 26rpx;
				color: #ffffff;
				text-align: center;
				margin-bottom: 28rpx;
				background: linear-gradient(
						270deg,
						#69cdfb 0%,
						rgba(105, 205, 251, 0) 11%,
						rgba(105, 205, 251, 0) 88%,
						#69cdfb 100%
					),
					#4196ff;
				border-radius: 28rpx 28rpx 28rpx 28rpx;
			}

			.desc {
				align-items: flex-start;
				margin-top: 22rpx;
				&-title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #345eae;
					line-height: 42rpx;
				}
				&-desc {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #60666c;
					line-height: 40rpx;
				}
			}

			.healthy-list:not(:first-child) {
				margin-top: 48rpx;
			}

			.qrcode {
				display: flex;
				background: #d6f0fd;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				padding: 28rpx 64rpx;
				justify-content: space-between;
				.flex-column {
					align-items: center;
					font-size: 28rpx;
				}
			}
		}
	}

	.extra {
		padding: 0 20rpx;
		font-size: 24rpx;
		color: #60666c;
	}
}
</style>
